<template>
    <block v-for="(item,index) in doctorInformation" :key="index">
        <!-- 个人信息 -->
        <view class="homepage-back">
            <view class="doctor-int">
                <image :src="item.avatar" mode="aspectFill"></image>
                <view>
                    <view class="doctor-int name-padd">
                        <text class="do-name">{{item.name}}</text>
                        <text>{{item.post}}</text>
                    </view>
                    <text>{{item.hospital}}</text>
                </view>
            </view>
            <view class="good-at">{{item.good_at}}</view>
        </view>
        <!-- 预约挂号 -->
        <view class="appoment">
            <view class="title">预约挂号</view>
            <view class="parttime">
                <view class="p-left">
                    <text>日期</text>
                    <text>上午</text>
                    <text>下午</text>
                </view>
                <scroll-view scroll-x="true" class="p-right" enable-flex="true">
                    <view class="app" v-for="(a_item,a_index) in item.App_ment" :key="a_index">
                        <view>
                            <text>{{a_item.day}}</text>
                            <text>{{a_item.week}}</text>
                        </view>
                        <view :class="a_item.time[0].nu_source==0 ? 'dontclick' : 'haveAppo' "
                            @click="apponment(a_item.week,a_item.time[1].the_time,a_item.time[1].when,item._id)">
                            {{a_item.time[0].nu_source==0 ?
                            '约满':
                            '可约'}}
                        </view>
                        <view :class="a_item.time[1].nu_source==0 ? 'dontclick' : 'haveAppo' "
                            @click="apponment(a_item.week,a_item.time[1].the_time,a_item.time[1].when,item._id)">
                            {{a_item.time[1].nu_source==0 ?
                            '约满':
                            '可约'}}
                        </view>
                    </view>


                </scroll-view>
            </view>
        </view>
    </block>
    <!-- 提示 -->
    <view class="prompt">
        <text>重要提示:</text>
        <text>1.本次预约就诊当天不可取消预约,如需取消,请在就诊前一天的24:00之前操作,累计取消或爽约三次可能会被列入医院黑名单,请按需预约</text>
        <text>2.预约挂号暂不支持医保支付,若本次挂号使用手机在线支付,就诊过程中的门诊检验检查,处方费用可能不支持医保支付</text>
    </view>
    <popUps ref="pop"></popUps>
</template>
<script setup lang="ts">
import { Doctorhome, DoctorHomeTime } from '@/public/decl-type';
import RequestApi from '@/public/request';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import popUps from './component/pop-ups.vue'
let _id = ref<string>('');
let doctorInformation = ref<Doctorhome[]>([])
interface resData {
    data: {
        data: Doctorhome[];
    }
}
interface Data {
    week: string;
    the_time: string[];
    when: number,
    show: boolean,
    _id: string
}
//获取子组件
const pop = ref();//语法糖写法
//预约
function apponment(week: string, the_time: string[], when: number, _id: string) {
    let Data: Data = { week, the_time, when, show: true, _id }
    //调用子组件里方法
    pop.value.trigGer(Data);
}
onLoad(async (data: any) => {
    _id.value = data._id;
    const res = await RequestApi.DoctorHome({ _id: _id.value }) as resData
    doctorInformation.value = res.data.data;
})
</script>
<style lang="scss">
page {
    background: linear-gradient(to bottom, #e8f4ff 30%, #f2f7fb 55%, #f0f5f9 90%);
}

/* 个人信息 */
.homepage-back {
    background-color: #ffffff;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 10rpx;
}

/* 顶部 */
.doctor-int image {
    display: block;
    width: 150rpx;
    height: 150rpx;
    margin-right: 20rpx;
}

.doctor-int {
    display: flex;
    align-items: center;
}

.do-name {
    font-size: 35rpx;
    font-weight: bold;
    padding-right: 10rpx;
}

.name-padd {
    padding-bottom: 20rpx;
}

.good-at {
    line-height: 1.5;
    padding-top: 20rpx;
}

.appoment {
    padding: 15rpx 10rpx;
    background-color: #ffffff;
    margin: 0 20rpx;
    margin-top: 10rpx;

    .title {
        font-size: 30rpx;
        margin-bottom: 10rpx;
    }

    .parttime {
        position: relative;

        .p-left {
            position: absolute;
            top: 0;
            left: 0px;
            height: 440rpx;
            background-color: #ffffff;

            text {
                display: block;
                height: calc(440rpx / 3);
                line-height: calc(440rpx / 3);
                width: 100rpx;
                text-align: center;
                border: 0.5px solid #dfdfdf;
            }
        }

        .p-right {
            white-space: nowrap;
            overflow: scroll;
            margin-left: 100rpx;
            display: flex;
            height: 455rpx;
            width: 85%;

            .app {
                height: 440rpx;

                view {
                    display: block;
                    height: calc(440rpx / 3);
                    line-height: calc(440rpx / 3);
                    width: 130rpx;
                    text-align: center;
                    border: 0.5px solid #dfdfdf;
                }

                view:nth-of-type(1) {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    background-color: #ffffff;

                    text {
                        line-height: 0;
                    }

                    text:nth-of-type(1) {
                        color: #dfdfdf;
                        margin-bottom: 40rpx;
                    }
                }

                .haveAppo {
                    background-color: #0075ff !important;
                    color: #ffffff !important;
                }

                .dontclick {
                    pointer-events: none;
                    background-color: #a8c3e2;
                    color: #dfdfdf;
                }
            }
        }
    }
}

/* 提示 */
.prompt text {
    margin-top: 20rpx;
    display: block;
    padding: 10rpx 20rpx;
    font-size: 26rpx;
    color: #636468;
    line-height: 1.5;
}
</style>